<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>VRS</title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/zTreeStyle.css">
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/javascript.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../js/localstorage.js"></script>
		<script type="text/javascript" src="../js/qrcode.js"></script>
    <script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
		<link rel="stylesheet" href="../css/Stylesheet.css" />

		<script type="text/javascript">
        // tree节点点击事件  name为这个节点的值
        function zTreeOnClick(event, treeId, treeNode) {
            $("#site").val(treeNode.name);
        };
        var setting = {
            callback: {
                onClick: zTreeOnClick
            }
        };
        var zNodes =[
            { name:"香港", open:true,
                children: [
                    { name:"九龙区",open:true,
                        children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"旺角区",open:true,
                            children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"西贡区",open:true,
                            children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"油尖旺区",open:true,
                           children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"深水埗区",open:true,
                           children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                           ]}
                ]}
        ];
    $(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })
    </script>
    <script type="text/javascript">
        $(function(){
        
            $("div").click(function(e){
                var id = $(this).attr("id");
                if(id == "aaa"){
                    return false;
                }else if(id == "tree"){
                    return false;
                }else{
                    $("#tree").slideUp(300);
                }
          
            })

            $("#site").click(function(e){
                $("#tree").slideDown(300);
            })

            // $("#site").blur(function(e){
            //  $("#tree").slideUp(300);
            // })
            $("#tree").hover(function(){},function(){
                $("#tree").slideUp(300);
                // $("#site").blur();
            })
        })
    </script>
		<style>
		#tree{
            width: 140px;display: none;position: absolute;background: #fff;
        }
			.tdS {
				background: #def0d8;
			}
			
			.tdI {
				background: #f2dedf;
			}
			
			th {
				text-align: center;
			}
			
			.table {
				box-shadow: 0 0;
			}
			
			img {
				cursor: pointer;
			}
			
			#bg {
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index: 1001;
				-moz-opacity: 0.7;
				opacity: .70;
				filter: alpha(opacity=70);
			}
			
			div.list_paging_top,
			div.list_paging_bottom,
			div.ExportLinks a {
				height: auto;
			}
			
			#show {
				display: none;
				position: absolute;
				top: 25%;
				left: 42%;
				width: 280px;
				height: 280px;
				padding: 8px;
				border: 8px solid #E8E9F7;
				background-color: white;
				z-index: 1002;
				overflow: auto;
			}
			
			.button,
			tr td button {
				padding: 2px 10px;
				margin: 0px 10px;
				background: #009bce;
				border-radius: 4px;
				border: 1px;
				color: #fff;
			}
		</style>
		</style>
	</head>

	<body>
		<div class="dropdown" style="position: absolute;right: 30px;top:10px;z-index: 100;color: #fff;">
			<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" style="background: #03a9f4 ; color: #fff;">
            <script>
            document.write(language.Language_switching)
            </script><span class="caret"></span>
        </button>
			<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','zh_cn');location.reload()">简体中文</a>
				</li>
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','zh_tw');location.reload()">繁体中文</a>
				</li>
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','en');location.reload()">English</a>
				</li>
			</ul>
		</div>
		<div id="headercontainer">
			<img src="../img/TourTrax-Logo.png" alt="TourTrax logo" class="mobilizelogo">
			<!-- <div class="mobilizelogo" style="color: #0fb5f1;font-size: 2.5em;margin: 0px;margin-left: 10px;line-height: 85px;"> -->
			<!-- <script>document.write(language.zizhu_yufang)</script> -->
			<!-- </div> -->
			<!-- <img class="customerLogo" src="" alt="BCS TourTrax 2.0 (Demo)" title="BCS TourTrax 2.0 (Demo)"> -->
			<div class="logindetails">
				<p>
					<script>
						document.write(language.Welcome)
					</script>
					<a href="javascript:;">
						<script>
							document.write(language.account)
						</script>
					</a> or
					<a href="#" onclick="location.href='../login.html'">
						<script>
							document.write(language.login_out)
						</script>
					</a>
				</p>
				<p>
					<a href="javascript:;"><img src="img/helpicon.png" alt="help icon"></a>
					<a href="javascript:;">
						<script>
							document.write(language.help)
						</script>
					</a>
				</p>
			</div>
			<!--End logindetails-->
		</div>
		<div id="bg" onclick="hidediv()"></div>
		<img id="show" src="" alt="" />
		<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="ModalLabel"><script>document.write(language.zizhu)</script></h4>
					</div>
					<form action="">
						<div class="modal-body">
							<table class="table">
								<tbody>
									<tr style="display: none;">
										<td>
											<script>
												document.write(language.name)
											</script>
										</td>
										<td>
											<input disabled="disabled" id="uname" name="name" class="form-control" type="text" value="Janny"/>
										</td>
									</tr>
									<tr>
										<td>
											<script>
												document.write(language.Visit_address)
											</script>
										</td>
										<td>
											<!--<input id="tel" name="tel" class="form-control" type="text" />-->
											<!-- <select name="tel" class="form-control"> -->
												<!-- <option>Site A</option> -->
												<!-- <option>Site B</option> -->
												<!-- <option>Site C</option> -->
											<!-- </select> -->
											<div  id="aaa">
												<input name="tel" type="text" id="site" placeholder="Please choose site">
						                        <div id="tree">
					                                <!-- <button style="float: right;" onclick="add()">增加</button> -->
					                                <ul id="treeDemo" class="ztree"></ul>
					                                </ul>
					                            </div>
					                        </div>
										</td>
									</tr>
									<tr>
										<td>
											<script>
												document.write(language.Interviewee_name)
											</script>
										</td>
										<td>
											<!--<input id="sname" name="sname" class="form-control" type="text" />-->
											<select id="sname" name="sname" onchange="sTel()" class="form-control">
												<option value="0">Tom</option>
												<option value="1">Mary</option>
											</select>
										</td>
										<script>
											function sTel(){
												var sval = $("#sname").val();
												if(sval == "0"){
													$("#stel").val("13131313131");
													$("#Bans").val("A");
													$("#floors").val("12/205");
												}else{
													$("#stel").val("12121212121");
													$("#Bans").val("B");
													$("#floors").val("12/205");
												}
											}
										</script>
									</tr>
									<tr>
										<td>
											<script>
												document.write(language.Interviewee_tel)
											</script>
										</td>
										<td>
											<input disabled="disabled" id="stel" name="stel" class="form-control" type="text" />
										</td>
									</tr>
									<tr>
										<td>
											<script>
												document.write(language.Visiting_date)
											</script>
										</td>
										<td>
											<input id="times" name="tim" class="form-control" type="date" />
										</td>
									</tr>
									<tr>
										<td>
											<script>
												document.write(language.Visitor_time)
											</script>
										</td>
										<td>
											<input id="codess" name="code" class="form-control" type="time" value="09:00" />
										</td>
									</tr>
									<tr>
										<td>
											<script>
												document.write(language.Visiting_time)
											</script>
										</td>
										<td>
											<input id="hour" name="hour" class="form-control" type="text" />
										</td>
									</tr>

									<tr>
										<td>
											<script>
												document.write(language.Ban)
											</script>
										</td>
										<td>
											<input id="Bans" disabled="disabled" name="Ban" class="form-control" type="text" />
										</td>
									</tr>
									<tr>
										<td>
											<script>
												document.write(language.floor)
											</script>
										</td>
										<td>
											<input id="floors" disabled="disabled" name="floor" class="form-control" type="text" />
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</form>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">
                        <script>
                        document.write(language.close)
                        </script>
                    </button>
						<button type="button" class="btn btn-primary" onclick="sub()">
                        <script>
                        document.write(language.Submit)
                        </script>
                    </button>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="pageheader">
			<div class="clear"></div>
			<h1>访客自助预约</h1>
		</div> -->
		<div class="listFilter" style="margin: 20px;">
			<h2><script>document.write(language.Host_landing)</script><span class="tooltip" style="display: none;"><em>(筛选下表)</em></span></h2>
			<div class="divider"></div>
			<table style="width: 100%;">
				<tbody>
					<tr>
						<td class="FormLabel">
							<script>
								document.write(language.Date_Filters)
							</script>
						</td>
						<td>
							<input type="date" id=""> &nbsp;&nbsp;
							<script>
								document.write(language.to)
							</script>&nbsp;&nbsp;
							<input type="date" id="">&nbsp;&nbsp;&nbsp;&nbsp;
							<button>
                            <script>
                            document.write(language.Filter)
                            </script>
                        </button>
						</td>
						<td>
							<div class="button" data-toggle="modal" data-target="#Modal" onclick="cl()" style="min-width: 100px;text-align: center;float: right;cursor: pointer;">
								<script>
									document.write(language.bespeak)
								</script>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="list_table" id="ltReport_list">
				<table class="list_table" id="ltReport_list" width="100%" cellspacing="0" style="text-align: center;">
					<thead>
						<tr>
							<th>
								<script>
									document.write(language.Visiting_date)
								</script>
							</th>
							<th>
								<script>
									document.write(language.Visitor_time)
								</script>
							</th>
							<th>
								<script>
									document.write(language.Interviewee_name)
								</script>
							</th>
							<th>
								<script>
									document.write(language.Interviewee_tel)
								</script>
							</th>
							<th>
								<script>
									document.write(language.Visit_address)
								</script>
							</th>
							<th>
								<script>
									document.write(language.Visiting_time)
								</script>
							</th>
							<th>
								<script>
									document.write(language.QR_code)
								</script>
							</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<tr class="odd_row">
							<td>2017-11-07</td>
							<td>08:00</td>
							<td>Mary Lee</td>
							<td>2846-5543</td>
							<td>site A</td>
							<td>2H</td>
							<td> <img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
						</tr>
						<tr class="even_row">
							<td>2017-11-07</td>
							<td>09:00</td>

							<td>Mary Lee</td>
							<td>2846-5543</td>
							<td>site A</td>
							<td>2H</td>
							<td> <img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
						</tr>
						<tr class="odd_row">
							<td>2017-11-07</td>
							<td>10:00</td>

							<td>Mary Lee</td>
							<td>2846-5543</td>
							<td>site A</td>
							<td>2H</td>
							<td> <img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
						</tr>
						<tr class="even_row">
							<td>2017-11-07</td>
							<td>11:00</td>

							<td>Mary Lee</td>
							<td>2846-5543</td>
							<td>site A</td>
							<td>2H</td>
							<td> <img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
						</tr>
						<tr class="odd_row">
							<td>2017-11-07</td>
							<td>12:00</td>

							<td>Mary Lee</td>
							<td>2846-5543</td>
							<td>site A</td>
							<td>2H</td>
							<td> <img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
						</tr>
					</tbody>
				</table>
				<div class="ExportLinks">
					<a href="#">
						<script>
							document.write(language.Export_all_to)
						</script> Excel</a>
					<a href="#">
						<script>
							document.write(language.Export_this_page_to)
						</script> Excel</a>
					<a href="#">
						<script>
							document.write(language.Export_this_page_to)
						</script> PDF</a>
					<a href="#">
						<script>
							document.write(language.Export_all_to)
						</script> PDF</a>
					<a href="#">
						<script>
							document.write(language.send)
						</script>
						<script>
							document.write(language.email)
						</script>
					</a>
				</div>
				<div class="WhereToLinks"></div>
			</div>
			<div style="display: none;">
				<p>内容：
					<input type="text" id="content" value="http://weibo.com/fdipzone" />
				</p>
				<p>尺寸：
					<input type="text" id="size" value="150">
				</p>
				<p>
					<button id="send">生成二维码</button>
				</p>
				<p>
					<a id="xia" href="" download="qrcode">下载二维码</a>
				</p>
				<div id="qrcode"></div>
			</div>
			<div class="clear"></div>
		</div>
	</body>
	<script type="text/javascript">
		function qrimg(o) {
			var src = $(o).attr('src');
			$('#bg').show();
			$('#show').attr('src', src).show();
		}

		function hidediv() {
			$('#bg').hide();
			$('#show').hide();
		}

		function cl() {
			// $("#name").val("");
			var aaa = new Date();
			var dateString = new Date(aaa.getTime()+24*3600*1000).toLocaleDateString();
			console.log(dateString)
			var qweasd = dateString.replace(/\//g, "-");
			$("#site").val("");
			$("#times").val(qweasd);
			$("#codess").val("09:00");
			$("#sname").val("");
			$("#stel").val("");
			$("#hour").val("");
		}

		function sub() {
			var name = $("#name").val();
			var tel = $("#site").val();
			var tim = $("#times").val();
			var code = $("#codess").val();
			var sname = $("#sname").val();
			var stel = $("#stel").val();
			var hour = $("#hour").val();
			var d = {};
			var t = $('form').serializeArray();
			$.each(t, function() {
				d[this.name] = this.value;
			});
			
			var formJson = JSON.stringify(d);
			crCode(formJson);
			console.log(formJson);
			$.ajax({
				type:"get",
				url:"http://221.204.11.69:3006/api/v1/send_sms?phone="+d.stel+"&person="+d.name+"&time="+d.tim+"  "+d.code+"&type=2",
				async:true,
				success:function(data){
					setTimeout(function() {
						var src = $("#qrcode img").attr("src")
						$("#tbody").append('<tr class="even_row"><td>' + tim + '</td><td>' + code + '</td><td>' + sname + '</td><td>' + stel + '</td><td>' + tel + '</td><td>' + hour + '</td><td><img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="' + src + '"></td></tr>')
						$('#Modal').modal('hide');
						alert(language.appointment_success)
						console.log(src);
					}, 500)
				}
			});
			console.log("------"+d.name);

		}

		// 二维码对象
		var qrcode;

		// 默认设置
		var content;
		var size;

		// 设置点击事件
		function crCode(data) {
			var name = $("#name").val();
			var tel = $("#site").val();
			var tim = $("#times").val();
			var code = $("#codess").val();
			var sname = $("#sname").val();
			var stel = $("#stel").val();
			var hour = $("#hour").val();
			if(name == "" || tel == "" || tim == "" || code == "" || sname == "" || stel == "" || hour == "") {
				alert("信息填写不完整,请继续填写！")
				return false;
			}

			// 获取内容
			content = data;
			content = content.replace(/(^\s*)|(\s*$)/g, "");

			// 获取尺寸
			size = document.getElementById("size").value;

			// 检查内容
			if(content == '') {
				alert('请输入内容！');
				return false;
			}

			// 检查尺寸
			if(!/^[0-9]*[1-9][0-9]*$/.test(size)) {
				alert('请输入正整数');
				return false;
			}

			// 清除上一次的二维码

			if(qrcode) {
				document.getElementById("qrcode").innerHTML = "";
				qrcode.clear();
			}

			// 创建二维码
			qrcode = new QRCode(document.getElementById("qrcode"), {
				width: size, //设置宽高
				height: size
			});

			qrcode.makeCode(content);

			
		}
	</script>

</html>